<template>
	<view class="Receipt">
		<view class="container">
			<view class="h3">{{ entity.CompayName }}</view>
			<view class="cell"><text>单号：</text>{{ entity.BillId }}</view>
			<view class="cell">
				<text>日期：</text>{{ entity.CreateTime?entity.CreateTime.substring(0, 10):'' }}
			</view>
			<view class="cell"><text>客户：</text>{{ entity.Customer||'散客' }}</view>
			<view class="cell">
				<text style="flex:2">客户地址:</text>
				<text style="flex: 8;">{{ entity.cCusAddress||'' }}</text>
			</view>
			<view class="tableBox">
				<view class="tableRow"
					:style="{borderBottom: '1px dashed #ccc', marginTop: '10px', lineHeight: '2',width:tableWidth+'px'}">
					<text class="tableIndex"></text>
					<text :class="tableflex?'tableCol left':'tableCol'" v-for="item in tableHeader"
						:style="{textAlign:typeNum(data[0][item.dataIndex])||item.dataIndex=='Batch'?'':'right'}"
						:key="item.dataIndex">{{item.title}}</text>
				</view>
				<view :style="{padding: '10px 0',width:tableWidth+'px'}">
					<view v-for="(item, index) in data" :key="index">
						<view class="tableRow">
							<text class="tableIndex">{{ index + 1 }}</text>
							<!--  -->
							<text :class="tableflex?'tableCol left':'tableCol'" v-for="im,ix in tableHeader" :key="ix"
								:style="{textAlign:typeNum(item[im.dataIndex])||im.dataIndex=='Batch'?'':'right'}">
								<text
									v-if="typeNum(item[im.dataIndex])||im.dataIndex=='Batch'">{{ item[im.dataIndex]||'' }}</text>
								<text v-else>{{momenyFormat(item[im.dataIndex])}}</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixBtn">
			<button type="primary" @click="toPage">去签收</button>
		</view>
	</view>
</template>

<script>
	import {
		momenyFormat
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				entity: {},
				data: [],
				tableHeader: [],
				tableWidth: 0,
				tableflex: false,
			}
		},
		onLoad() {
			this.tableWidth = uni.getSystemInfoSync().windowWidth - 44
			this.getTheData()
		},
		methods: {
			toPage() {
				uni.redirectTo({
					url: '/pages/Page/Page'
				})
			},
			typeNum(num) {
				if (num) return isNaN(Number(num))
				else return true
			},
			getTheData() {
				let id = uni.getStorageSync('Id')
				this.$http('post', "/BO/BillList/GetBillData", {
					id
				}).then((res) => {
					if (res.Success) {
						this.entity = res.Data
						JSON.parse(this.entity.Content).printlist.forEach(item => {
							if (item.Keys == 'Addres') this.entity.cCusAddress = item.value
							else if (item.Keys == 'table') {
								this.tableHeader = item.columns.filter(item => item.title != '序号' && item
									.title != '签收数量')
								this.data = item.datalist
							}
						})
						let width = (this.tableHeader.length * 75) + 25
						if (width > this.tableWidth) {
							this.tableWidth = (this.tableHeader.length * 75) + 25
							return
						}
						this.tableflex = true
					}
				})
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.fixBtn {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0;
		padding: 30px;
		box-sizing: border-box;
		background-color: #fff;
		padding-top: 10px;
	}

	.Receipt {
		padding-bottom: 80px;

		.imgBox {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 180px;
			overflow: hidden;
			width: 100%;
			background-color: #fff;

			.img {
				transform: rotate(-90deg);
				width: 160px;
				background-color: #fff;
			}
		}

		.txt {
			margin-top: 10px;
		}

		.container {
			margin: 0 auto;
			color: #000;
			padding: 10px 40rpx;

			.tableBox {
				overflow-x: scroll;
			}

			.h3 {
				text-align: center;
				font-weight: bold;
			}

			.cell {
				display: flex;
				line-height: 2;

				span {
					width: 40px;
				}
			}

			.tableRow {
				font-size: 12px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ccc;

				span {
					overflow: hidden;
				}

				.tableCol {
					// flex: 1;
					width: 75px;
					// text-align: right;
					overflow: hidden;
					box-sizing: border-box;
					padding: 0 2px;
				}

				.tableInp {
					font-size: 12px;
					width: 75px;
					text-align: right;
					overflow: hidden;
					border: 1px solid #ccc;
					padding: 4px;
					border-radius: 4px;
				}

				.left {
					// text-align: left;
					flex: 1;
				}

				.tableIndex {
					width: 25px;
				}

				.col2 {
					width: 150px;
				}
			}
		}
	}
</style>